<template>
  <div>
    <!-- 点击打开添加的对话框 -->

    <el-button type="primary" @click="dialogFormVisible = true">添加</el-button>

    <el-button type="danger">批量删除</el-button>
    <!-- 弹出框 -->
    <el-dialog title="添加菜单" :visible.sync="dialogFormVisible">
      <!-- 弹出框内的表单 -->
      <el-form :model="form">
        <el-form-item label="菜单等级" :label-width="formLabelWidth">
          <el-select v-model="form.pid" placeholder="请选择">
            <el-option label="顶级菜单" :value="0"></el-option>
            <el-option
              v-for="item in menulist"
              :key="item.id"
              :label="item.title"
              :value="item.id"
            >
            </el-option>
          </el-select>

          <!-- 目录图标 -->
          <el-form-item label="目录图标" :label-width="formLabelWidth">
            <icon-picker v-model="form.icon"></icon-picker>
          </el-form-item>

          <!-- 菜单名称 -->
          <el-form-item label="菜单名称" :label-width="formLabelWidth">
            <el-input v-model="form.title" autocomplete="off"></el-input>
          </el-form-item>
        </el-form-item>

        <!-- 菜单路由 -->
        <el-form-item
          label="菜单地址"
          :label-width="formLabelWidth"
          v-show="form.pid != 0"
        >
          <el-input v-model="form.url" autocomplete="off"></el-input>
        </el-form-item>

        <!-- 菜单类型 -->
        <el-form-item label="菜单类型" :label-width="formLabelWidth">
          <el-radio v-model="form.type" :label="1" >目录</el-radio>
          <el-radio v-model="form.type" :label="2" >菜单</el-radio>
        </el-form-item>

        <!-- 菜单状态 -->
        <el-form-item label="菜单状态" :label-width="formLabelWidth">
          <el-switch
            v-model="form.status"
            :active-value="1"
            :inactive-value="2"
          >
          </el-switch>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="sunmit()">确 定</el-button>
      </div>
    </el-dialog>

    <!-- 下方的表格 -->
    <el-table
      :data="menulist"
      style="width: 100%; margin-bottom: 20px"
      row-key="id"
      border
      default-expand-all
      :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
    >
      <el-table-column prop="title" label="名称" sortable width="180">
      </el-table-column>
      <el-table-column label="图标" sortable width="180">
        <template slot-scope="scope">
          <i :class="scope.row.icon"></i>
        </template>
      </el-table-column>

      <el-table-column prop="type" label="类型">
        <template slot-scope="scope">
          <el-button
            size="mini"
            plain
            :type="scope.row.type == 1 ? 'success' : 'primary'"
            >{{ scope.row.type == 1 ? "目录" : "菜单" }}</el-button
          >
        </template>
      </el-table-column>

      <el-table-column prop="url" label="地址"> </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleEdit(scope.$index, scope.row)"
            >编辑</el-button
          >
          <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <!-- 编辑 -->
    <el-dialog title="收货地址" :visible.sync="dialogFormVisible2">
      <el-form :model="form2">
        <el-form-item label="菜单等级" :label-width="formLabelWidth">
          <el-select v-model="form2.pid" placeholder="请选择">
            <el-option label="顶级菜单" :value="0"></el-option>
            <el-option
              v-for="item in menulist"
              :key="item.id"
              :label="item.title"
              :value="item.id"
            >
            </el-option>
          </el-select>

          <!-- 目录图标 -->
          <el-form-item label="目录图标" :label-width="formLabelWidth">
            <icon-picker v-model="form2.icon"></icon-picker>
          </el-form-item>

          <!-- 菜单名称 -->
          <el-form-item label="菜单名称" :label-width="formLabelWidth">
            <el-input v-model="form2.title" autocomplete="off"></el-input>
          </el-form-item>
        </el-form-item>

        <!-- 菜单路由 -->
        <el-form-item
          label="菜单地址"
          :label-width="formLabelWidth"
          v-show="form2.pid != 0"
        >
          <el-input v-model="form2.url" autocomplete="off"></el-input>
        </el-form-item>

        <!-- 菜单类型 -->
        <el-form-item label="菜单类型" :label-width="formLabelWidth">
          <el-radio v-model="form2.type" :label="1" disabled>目录</el-radio>
          <el-radio v-model="form2.type" :label="2" disabled>菜单</el-radio>
        </el-form-item>

        <!-- 菜单状态 -->
        <el-form-item label="菜单状态" :label-width="formLabelWidth">
          <el-switch
            v-model="form2.status"
            :active-value="1"
            :inactive-value="2"
          >
          </el-switch>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible2 = false">取 消</el-button>
        <el-button type="primary" @click="sunmit2()">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 请求来的表格数据
      menulist: [],
      // 打开的添加表单的数据
      form: {
        pid: 0, //顶级菜单id
        title: "", //菜单名称
        icon: "", //菜单图标
        type: 1, //菜单类型 1：目录  2：菜单
        url: "", //菜单路由
        status: 1, //1 启用  2禁用
      },
      // 打开的编辑表单的数据
      form2: {
        pid: 0, //顶级菜单id
        title: "", //菜单名称
        icon: "", //菜单图标
        type: 1, //菜单类型 1：目录  2：菜单
        url: "", //菜单路由
        status: 1, //1 启用  2禁用
      },

      // 点击添加弹出框关闭
      dialogFormVisible: false,
      // 点击编辑弹出框关闭
      dialogFormVisible2: false,
      // 宽度
      formLabelWidth: "120px",
    };
  },
  methods: {
    // 添加函数
    sunmit() {
      this.$api.reqAddMenu(this.form).then((res) => {
        // console.log(res);
        this.$message.success("添加成功");
      });
      this.dialogFormVisible = false;
    },
    //删除
    handleDelete(index, row) {
      // console.log(row,index);
      this.$api.reqRemoveMenu({ id: row.id }).then((res) => {
        this.$message.success("删除成功");
        this.menuList = res;
        this.menulist2 = res;
      });
    },
    //编辑
    handleEdit(index, row) {
      this.dialogFormVisible2 = true;
      this.form2 = JSON.parse(JSON.stringify(row));
    },
    //编辑提交
    sunmit2(){
      this.$api.reqEditMenu({
        id: this.form2.id,
        pid: this.form2.pid,
        title: this.form2.title,
        icon: this.form2.icon,
        type: this.form2.type,
        url: this.form2.url,
        status: this.form2.status,
      }).then((res) => {
        // console.log(res);
        this.$message.success("编辑成功");
      });
      this.dialogFormVisible2 = false;
    }
  },
  created() {},
  mounted() {
    this.$api.reqGetMenu({ istree: true }).then((res) => {
      // console.log(res);
      this.menulist = res.data.list;
    });
  },
  components: {},
  computed: {},
  watch: {},
};
</script>

<style lang='scss' scoped>
</style>
